<template>
  <div class="chat-item" :class="{ ai: props.isAi }">

    <div class="chat-item-wrap" @click="clickItem()">
      <div class="question-wrap">
        <chat-content :content="props.question"></chat-content>
        <div class="operate-list flex">
          <van-button @click="copyText(props.question)" size="small" round v-show="isClick">
            <div class="operate-btn flex"> <i class="ai-icon-copy"></i>复制</div>
          </van-button>
        </div>
      </div>

      <!-- 涨粉文案 -->
      <div v-if="typeof props.content == 'object'">
        <ChildAi :list="props.content" :index="props.index"></ChildAi>
      </div>
      <div v-else>

        <!-- <AiLoading v-if="true" :loading="isSelfLoading && !props.thinkking"></AiLoading> -->
        <chat-content type="answer" :thinkking="props.thinkking" :content="props.content" :isAi="true"
          :isLoading="ai.isLoading" :isStop="isStop"></chat-content>
        <!-- isclick--{{ isClick }} -->
        <div class="operate-list flex" v-show="!ai.isLoading && isAi && !ai.isStorage">
          <van-button @click="copyText(props.content)" class="van-button" size="small" round
            v-show="!isAi || isClick || (index == chatStore.chatList.length - 1)">
            <div class="operate-btn flex"> <i class="ai-icon-copy"></i>复制</div>
          </van-button>
          <van-button @click="refreshAiFn(props)" class="van-button" size="small" round
            v-show="index == chatStore.chatList.length - 1">
            <div class="operate-btn flex"> <i class="ai-icon-refresh"></i>重新生成</div>
          </van-button>

        </div>
      </div>

    </div>
    <!-- props：{{ props }} -->
    <!-- isSelfLoading:{{ isSelfLoading }}，thinkking:{{ props.thinkking }}，content:{{ content }} -->
    <!-- 100000000000000000000 -->
    <div class="stop-wrap">
      <div v-if="isSelfLoading" @click="stopAnswer">
        <button class="stop-answer">停止回答</button>
      </div>
      <!-- <p v-if="isStop">已暂停生成</p> -->
    </div>

  </div>
</template>

<script setup>
import { ref, watch, inject, defineProps, computed, onMounted } from 'vue';
import { useAppStore, useChatStore, useUserStore } from '@/store';
import ChatContent from './ChatContent.vue';
import Ai from './AI.js';
import ChildAi from './ChildAi.vue';
import AiLoading from './AiLoading.vue';
const chatStore = useChatStore();
const props = defineProps({
  isAi: {
    type: Boolean,
    default: false,
  },
  question: {
    type: String
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  index: Number
});
let ai = {};
let isSelfLoading = ref(false);
let isStop = ref(false);
onMounted(() => {
  ai = new Ai(props);
  console.log('onmounted', props);
  if (uni.getStorageSync('isFirstVisit')) {
    console.log('第一次访问');

    isSelfLoading.value = true;
    ai.answerComplete = () => {
      isSelfLoading.value = false;
    }

    ai.askQuestion();
  } else {

  }

})
// const isOperate = ref(false);
let isClick = ref(false);
const appStore = useAppStore();
let isOperate = computed(() => {
  console.log('是不是点击', isClick.value);
  console.log('是不是loading', props.isLoading);
  return (isClick.value || props.index == chatStore.chatList.length - 1) && !props.isLoading;
})
function stopAnswer() {
  console.log('点击ai的停止回答')
  ai.stopAnswer();
  isSelfLoading.value = false;
  isStop.value = true;
}
// 监测会话列表长度，默认只有最新的ai回答才有操作按钮，旧的ai问答不显示操作按钮
// watch(chatStore.chatList, (newVal, oldVal) => {
//   ;
//   if (props.index == newVal.length - 1) {
//     isOperate.value = true;
//   } else {
//     isOperate.value = false;
//   }
// })
const avatarUrl = computed(() => {
  let url = props.isAi ? appStore.siteInfo.siteLogoUrl : '@/assets/imgs/pages/chat/wxicon.png';
  return url; //chatStore.chatList[props.index].avatarUrl
})
function clickItem() {
  chatStore.changeActiveChat({
    chat: props,
    index: props.index,
  });
  if (props.isLoading) {
    return;
  }
  isClick.value = !isClick.value;
}


// computed(props.isAi, (isAi) => {
//   ;
//   isOperate.value = isAi;
// })
const askAi = inject('askAi');
const refreshAi = inject('refreshAi');
/**
 * @description 复制文本
 * @param {String} text 要复制的文本内容
 */
function copyText(text) {
  wx.setClipboardData({
    data: text,
    success(res) {
      wx.getClipboardData({
        success(res) {
        }
      })
    }
  })
}
function removeChat(chatItem) {
  chatStore.removeChat(chatItem)
}
/**
 * @description 刷新ai
 * @param {Object} item 要刷新ai的item
 */
async function refreshAiFn(item) {
  // ;
  clickItem();
  console.log('用户点击的chat', item);
  isSelfLoading.value = true;
  isStop.value = false;
  // chatStore.changeLoading(true);
  let refreshReq = {};
  // if (ai.freshIsAi) {
  //   refreshReq = {
  //     question: `生成类似的文案:${item.content}`
  //   }
  // }
  ai.getAiAnserFn();

  // console.log('isselfloading', isSelfLoading.value)

  // question: `请根据我提供的文案风格和主要内容，创作一段相似但不完全相同的新的文案。请注意保持原创性和避免直接复制原有的内容。谢谢:${item.content}`

  // question: `请根据我提供的文案风格和主要内容，创作一段相似但不完全相同的新的文案。避免直接复制原有的内容。谢谢:${item.content}`
  // );


}
</script>

<style lang="less" scoped>
.chat-item {
  display: flex;
  margin-bottom: 0.6667rem;
  flex-direction: row-reverse;

  &.ai {
    flex-direction: row;

    .chat-item-wrap {
      width: 100%;
    }
  }
}

.question-wrap {
  .operate-list {
    flex-direction: row-reverse;
  }
}

.operate-list {
  i {
    display: inline-block;
    margin-right: 20px;
  }

  .van-button {
    margin-right: 24rpx;
    // background-color: red;
  }
}



.chat-item-avatar {
  width: 78rpx;
  height: 78rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  margin-right: 14rpx;
}




.ai {
  .chat-item-content {
    background-color: #fff;

  }
}

.time {
  // font-size: .2667rem;
  // line-height: .5867rem;
}

.stop-wrap {
  position: fixed;
  bottom: 285rpx;
  padding: 20rpx 0 20rpx;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 500;

  .stop-answer {
    width: 50%;

    margin: 0 auto;
    line-height: 2.5;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 28rpx;
    color: #666;
  }
}
</style>